<template>
  <div id="app">
    <div>
      <input v-model="val" type="text" placeholder="请输入内容">=====
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in $store.state.list" :key="index">
        ={{item.done}}==<input type="checkbox" v-model='item.done' name="" id="">
        {{item.info}}
        <span @click="del(item.id)">=========删除</span>
      </li>
    </ul>
    <div class="bottom-box" style="">
      <div>{{$store.getters.num}}条剩余</div>
      <div>
        <button>全部</button>
        <button>未完成</button>
        <button>已完成</button>
      </div>
      <div>删除已完成</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      val: ''
    }
  },
  created() {
    this.$store.dispatch('aList')
  },
  methods: {
    add() {
      var obj = {
        id: 5,
        info: this.val,
        done: true
      }

      //  点击按钮触发吗，mutations中的数据并将获取的数据追加到list中
      this.$store.commit('addVal', obj)
      this.val = ''
    },
    //删除数据
    del(id) {
      console.log(id, 55666)
      this.$store.commit('mdel', id)
    }
  }
}
</script>


<style scoped lang="less">
.bottom-box {
  display: flex;
  width: 500px;
  justify-content: space-between;
  > div {
  }
}
</style>
